/**
 * @author:linjiye
 * @date: 2025/1/3
 * @desc:
 **/

import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
import React, {useEffect, useState} from 'react'
import {LinearGradient} from "expo-linear-gradient";
import {getViewInfo} from "react-native-reanimated/lib/typescript/createAnimatedComponent/getViewInfo";
import {withDecay} from "react-native-reanimated";

type Props = {
    text?: string,
    placeholder?: string,
    onChangeText?: (value: (((prevState: string) => string) | string)) => void,
    style?: { marginVertical: number },
    height?: number,
    type?: string
}

const FcTextInput = ({
                         borderColor = ['rgba(51,77,176,1)', 'rgba(198,94,253,1)'],
                         placeholder = '',
                         text,
                         width = 'auto',
                         height = 40,
                         placeholderTextColor = 'rgba(0, 0, 0, 0.3)',
                         multiline = false,
                         style,
                         bodyStyle,
                         inputStyle,
                         closeBtnStyle,
                         closeStyle,
                         leftIconEleStyle,
                         onChangeText,
                         onSubmitEditing,
                         onblur,
                         type = 'auto',
                         positionEle,
                         leftIconEle,
                         closeIcon=true,
                         keyboardType='default',
                         onClick,
                     }: Props) => {
    const [colors, setColors] = useState([borderColor])
    const [txt, setTxt] = useState(text)
    const [secureTextEntry, setSecureTextEntry] = useState(false)

    useEffect(() => {
        setSecureTextEntry(type === 'password')
    }, [type]);

    useEffect(() => {
        setTxt(text)
    }, [text]);

    const focusTextInput = () => {
        setColors(borderColor)
    }
    const blurTextInput = () => {
        setColors(['transparent', 'transparent'])
        onblur && onblur(txt)
    }

    const handleText = (val) => {
        setTxt(val)
        onChangeText && onChangeText(val)
    }

    const handleSubmit = (e) => {
        if(onSubmitEditing){
            onSubmitEditing(txt)
            setTxt('')
        }
    }

    const handleKeyPress = (event) => {
        if (event.nativeEvent.key === 'Enter') {
            // 处理回车事件
            onSubmitEditing && onSubmitEditing(txt)
            setTxt('')
        }
    };

    const handleClick = () => {
        onClick && onClick()
    }

    return (
        <View>
            <LinearGradient
                colors={colors} // 渐变色
                start={{x: 0, y: 0}}
                end={{x: 1, y: 1}}
                style={[styles.gradient, {width: width, height: height, position: 'relative'},style]}
            >
                <TouchableOpacity activeOpacity={1} style={[styles.container, bodyStyle]} onPress={() => handleClick()}>
                    {(type === 'search' || type === 'password' || leftIconEle) &&
                        <View style={[styles.left_icon_wrap, leftIconEleStyle]}>
                            {type === 'search' && <Text style={styles.left_icon}>&#xe641;</Text>}
                            {type === 'password' && <Text style={styles.left_icon}>&#xe636;</Text>}
                            {leftIconEle && <Text style={styles.left_icon}>{leftIconEle}</Text>}
                        </View>
                    }
                    <TextInput
                        editable={!onClick}
                        style={[styles.text_input,multiline && styles.textInputStyle, inputStyle]}
                        multiline={multiline}
                        // numberOfLines={4}
                        value={txt}
                        secureTextEntry={secureTextEntry}
                        placeholderTextColor={placeholderTextColor}
                        placeholder={placeholder}
                        keyboardType={keyboardType}
                        keyboardShouldPersistTaps="always" // 或者 'handled'
                        underlineColorAndroid="transparent" // 设置安卓下的下划线颜色为透明
                        selectionColor="transparent" // 设置选中时的颜色为透明
                        onSubmitEditing={handleSubmit} // 处理回车事件
                        onKeyPress={handleKeyPress} // 监听按键事件
                        returnKeyType="done" // 设置回车键类型
                        onFocus={focusTextInput}
                        onBlur={blurTextInput}
                        onChangeText={handleText}
                    />
                    {txt != '' && closeIcon &&
                        <TouchableOpacity style={[styles.close_btn, multiline && styles.close, closeBtnStyle]}
                                          onPress={() => handleText('')}>
                            <Text style={[{
                                fontFamily: 'FcIconFont',
                                fontSize: 12,
                                color: 'white'
                            }, closeStyle]}>&#xe61a;</Text>
                        </TouchableOpacity>
                    }
                    {type === 'password' &&
                        <TouchableOpacity style={[styles.right_icon]} onPress={() => setSecureTextEntry(!secureTextEntry)}>
                            {secureTextEntry && <Text style={styles.left_icon}>&#xe626;</Text>}
                            {!secureTextEntry && <Text style={styles.left_icon}>&#xe619;</Text>}
                        </TouchableOpacity>
                    }
                    {positionEle && <>{positionEle}</>}

                </TouchableOpacity>

            </LinearGradient>
        </View>
    )
}

export default FcTextInput

const styles = StyleSheet.create({
    gradient: {
        // flex: 1,
        height: 82,
        // margin: 16,
        // marginVertical: 16,
        borderRadius: 10,
        overflow: "hidden",
        alignItems: "center",
        justifyContent: "center",
        // paddingHorizontal: 1,
        position: "relative",
        flexDirection: "row",
        borderWidth: 1,
        borderColor: 'transparent'
    },
    container: {
        flex: 1,
        width: '100%',
        height: '100%',
        borderRadius: 9,
        overflow: "hidden",
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: '#F1F2F4',
        paddingHorizontal: 12,
    },
    text_input: {
        // width: '100%',
        flex: 1,
        // paddingHorizontal: 12,
        height: '100%',
        overflow: "hidden",
        flexDirection: "row",
        alignItems: "center",
        // marginHorizontal: 37,
        backgroundColor: 'transparent',
        color: 'rgba(0,0,0,0.9)',
        fontSize: 15,
        lineHeight: 26,
        paddingVertical: 8,
        // margin: 1,
        borderWidth: 0, // 去掉边框
        outlineWidth: 0, // 去掉轮廓
        shadowOpacity: 0, // 去掉阴影

    },
    textInputStyle: {
        textAlignVertical:'top'
    },
    close_btn: {
        // height: '100%',
        // display: "flex",
        // alignItems: "center",
        width: 16,
        height: 16,
        borderRadius: '50%',
        backgroundColor: 'rgba(0,0,0,0.3)',
        marginVertical: "auto",
        flexShrink: 0,
        justifyContent: "center",
        alignItems: "center",
        // marginRight: 10
    },
    close: {
        width: 16,
        height: 16,
        borderRadius: '50%',
        backgroundColor: 'rgba(0,0,0,0.3)',
        justifyContent: "center",
        alignItems: "center",
        position: "absolute",
        right: 12,
        bottom: 12,
        zIndex: 100
    },
    left_icon_wrap: {
        minWidth: 20,
        height: '100%',
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        paddingRight: 8,
        flexShrink: 0
    },
    left_icon: {
        fontFamily: 'FcIconFont',
        fontSize: 20,
        color: 'rgba(0,0,0,0.5)'
    },
    right_icon: {
        marginVertical: "auto",
        flexShrink: 0,
        justifyContent: "center",
        alignItems: "center",
        marginLeft: 8
    }
})